<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/store'
import { fetchWithdrawalData } from '@/api/withdraw.js'
import Records from './records.vue'

const loading = ref(true)

const userStore = useUserStore()

const withdraw = ref([])
async function fetchCashFlow() {
    try {
        const res = await fetchWithdrawalData({
            device: userStore.uuid
        })
        withdraw.value = res.data.data
    } catch (error) {

    }
    loading.value = false
}
fetchCashFlow()

function tipColor(status) {
    const colorMap = {
        1: '#1f1d1f',
        2: '#70b95a',
        3: '#f00000'
    }
    return colorMap[status]
}
</script>

<template>
    <van-loading v-if="loading" style="position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);" vertical
        color="#f2456b" text-color="#f2456b">
        Loading...
    </van-loading>
    <div class="records" v-else>
        <ul>
            <li v-for="flow in withdraw">
                <div class="records-item">
                    <div class="date">
                        <span>
                            {{ flow.createTime }}
                        </span>
                    </div>
                    <div class="amount">

                        <span>+{{ flow.amount }}</span>
                    </div>
                    <div class="tip">
                        <span :style="{color: tipColor(flow.status)}">{{ flow.statusName }}</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <span class="tips">
        Warm reminder: After submitting the application, it will be reviewed within 48 hours on working days! If you have any questions, please send an email to stephen.curry2931@outlook.com
    </span>
</template>

<style scoped lang="scss">
.records ul li {
    padding: 0 3vmin;
}

.records-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 18vmin;
    border-bottom: 1px solid #696969;

    & > div {
        display: flex;
        flex: 1;
    }

    %span {
        font-weight: bold;
        font-size: var(--mini-font-size);
        color: var(--main-color);
    }

    .date {
        display: block;
        width: 23vmin;
        line-height: 1.5;
        flex: initial;
        span {
            @extend %span;
            color: var(--main-color);
        }
    }

    .amount {
        justify-content: center;
        span {
            @extend %span;
            color: var(--task-color);
            font-size: var(--small-font-size);
        }
    }

    .tip {
        justify-content: center;
        span {
            @extend %span;
        }
    }

}
.tips {
    display: block;
    color: var(--task-color);
    padding: 3vmin;
    font-size: var(--mini-font-size);
}
</style>